import React, {FC, useCallback} from "react";
import {Select} from "antd";
import {SelectProps} from "antd/lib/select";

/**
 * 多选下拉框,value支持逗号分隔的字符串和数组
 */
const MultipleSelect: FC<SelectProps<any>> = props => {
  const {children, value, onChange, ...rest} = props;
  const values = value ? value.split(',') : [];

  const onChanges = useCallback((newValue: any) => {
    //@ts-ignore
    onChange && onChange(newValue ? newValue.join() : '');
  }, [onChange]);

  return (
    <Select mode="multiple" value={values} onChange={onChanges} {...rest}>
      {children}
    </Select>
  );
}

export default MultipleSelect;
